<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Style绑定</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <div v-bind:style="{color: activeColor, fontSize: fontsize+'px'}">小林子</div>
    <div v-bind:style="styleObject">大林子</div>

    <div v-bind:style="[baseStyle,overridingStyles]">超大的林子</div>

    <!--多重值-->
    <div :style="{ display: ['-webkit-box','-ms-flexbox','flex']}">看看支持哪个</div>

</div>

<script>
    var vm=new Vue({
        el: '#app',
        data:{
            activeColor:'red',
            fontsize:50,
            styleObject:{
                color:'blue',
                fontSize:'60px'
            },
            baseStyle:{
                color:'green',
                fontSize:'70px'
            },
            overridingStyles:{
                'font-weight':'bolder'
            }
        }
    })
</script>

</body>
</html>